<template>
  <el-container   class="login-one">
    <el-header></el-header>
    <!-- 邮箱登录-->
    <el-main>
      <br /><br /><br /><br /><br /><br /><br />
      <el-row >
        <el-col :span="8" align="center">&nbsp;</el-col>
        <el-col :span="8" align="center" style="border: 1px burlywood solid;border-radius: 5px;">
          <h1 align="center" style="color: #6e2f1f;">用户登录</h1>
          <!-- 邮箱登录-->
          <template v-if="isShow == 0">
          <el-form label-width="100px" >

            <el-form-item label="邮箱">
              <el-col :span="20">
                <el-input v-model="userInfo.userEmail"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="验证码">
              <el-col :span="20">
                <el-input v-model="userInfo.code"></el-input>
              </el-col>

            </el-form-item>
            <el-form-item>
              <el-row>
                <el-col :span="8" align="center">
                  <el-button type="success" size="mini" @click="Code(0)" :disabled="isDis">发送验证码({{num}})</el-button>
                  </el-col>
                <el-col :span="12" align="center">
                  <el-button type="success" size="mini" @click="Login(0)">登录</el-button>
                </el-col>
                <el-col :span="4" align="center"></el-col>
              </el-row>

            </el-form-item>
          </el-form>
          </template>
          <!-- 用户名登录-->
          <template v-else-if="isShow == 1">
          <el-form label-width="100px" >
            <el-form-item label="用户名">
              <el-col :span="20">
                <el-input v-model="userInfo.userName"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="密码">
              <el-col :span="20">
                <el-input v-model="userInfo.userPwd"></el-input>
              </el-col>

            </el-form-item>
            <el-form-item>
              <el-row>
                <el-col :span="3" align="center">&nbsp</el-col>
                <el-col :span="11" align="center">
                  <el-button type="success" size="mini" @click="Login(2)">登录</el-button>
                </el-col>
                <el-col :span="4" align="center"></el-col>
              </el-row>

            </el-form-item>
          </el-form>
          </template>
          <!-- 短信登录-->
          <template v-else="isShow == 2">
          <el-form  label-width="100px" >
            <el-form-item label="手机号码">
              <el-col :span="20">
                <el-input v-model="userInfo.phone"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="验证码">
              <el-col :span="20">
                <el-input v-model="userInfo.code"></el-input>
              </el-col>

            </el-form-item>
            <el-form-item>
              <el-row>
                <el-col :span="8" align="center">
                  <el-button type="success" size="mini" @click="Code(1)" :disabled="isDis">发送验证码({{num}})</el-button>
                  </el-col>
                <el-col :span="12" align="center">
                  <el-button type="success" size="mini" @click="Login(1)">登录</el-button>
                </el-col>
                <el-col :span="4" align="center"></el-col>
              </el-row>

            </el-form-item>
          </el-form>
          </template>
          <el-row>
            <el-col :span="6" align="center">
              <a class="el-icon-user-solid" style="color: #584833;" @click="change(1)">用户名登录</a>
            </el-col>
            <el-col :span="5" align="center">
              <a class="el-icon-info" style="color: #584833;" @click="change(0)">邮箱登录</a>
            </el-col>
            <el-col :span="5" align="center">
              <a class="el-icon-s-comment" style="color: #584833;" @click="change(2)">短信登录</a>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8" align="center">&nbsp;</el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
  export default{
    name:"email",
    data(){
      return{
        userInfo:{
          userEmail:"",
          code:"",
          userName:"",
          userPwd:"",
          phone:"",
        },
        num:10,//倒计时
        isDis:false,//
        isShow:1
      }
    },
    methods:{
      Login(i){
        var self = this;
        var s = "";
        if(i == 0){
          s = "/api/user/emailLogin";
        }else if(i == 1){
          s = "/api/user/smsLogin";
        }else{
          s = "/api/user/userLogin";
        }
        var http = this.$http.post(s,this.$qs.stringify(this.userInfo));
        http.then(function(rs){
            if(rs.data.code == 200){
              sessionStorage.setItem("name",rs.data.data.userName)
              self.$router.replace("/index/userIndex");
            }else{
              alert(rs.data.msg)
            }
        })
      },
      Code(i){
        var self = this;
        var s = "";
        console.log(this.userInfo.userEmail)
        if(i == 0){
          s = "/api/user/sendEmailCode";
        }else if(i == 1){
          s = "/api/user/sendSmsCode";
        }
        this.$http.post(s,
                        this.$qs.stringify(this.userInfo)
                        ).then(function(rs){
                          alert(rs.data.msg)
                          if(rs.data.code == 200){
                            self.isDis = true;
                            var time = setInterval(function(){
                              self.num--;
                              if(self.num == 0){
                                self.isDis = false;
                                self.num = 10;
                                clearInterval(time);
                              }
                            },1000);
                          }
                        })
      },
      change(data){
        this.isShow = data
      }
    }
  }
</script>

<style>
  html,body{
    margin: 0px;
    height: 100%;
  }
   .login-one{
          background-color:#1c77ac;
          background-image:url(../assets/light.png);
          background-repeat: no-repeat;
         background-size: cover;
         -webkit-background-size: cover;
          -o-background-size: cover;
          background-position: center 0;
          background-repeat:no-repeat;
          overflow:hidden;
          height: 100%;
      }
</style>
